<template>
    <div class="baseInfo" v-if="timelineStore.current && timelineStore.current.spr">
        <n-table :bordered="false" :single-line="false">
            <thead>
                <tr>
                    <th>参数名</th>
                    <th>参数值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                    <td>{{ timelineStore.current.spr.name }}</td>
                </tr>
                <tr>
                    <td>Duration</td>
                    <td>{{ timelineStore.current.spr.duration }}</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td>{{ timelineStore.current.spr.rect.x }}</td>
                </tr>
                <tr>
                    <td>Y</td>
                    <td>{{ timelineStore.current.spr.rect.y }}</td>
                </tr>
                <tr>
                    <td>Width</td>
                    <td>{{ timelineStore.current.spr.rect.w }}</td>
                </tr>
                <tr>
                    <td>Height</td>
                    <td>{{ timelineStore.current.spr.rect.h }}</td>
                </tr>
                <tr>
                    <td>Angle</td>
                    <td>{{ timelineStore.current.spr.angle }}</td>
                </tr>
                <tr>
                    <td>ZIndex</td>
                    <td>{{ timelineStore.current.spr.zIndex }}</td>
                </tr>
                <tr>
                    <td>Opacity</td>
                    <td>{{ timelineStore.current.spr.opacity }}</td>
                </tr>
            </tbody>
        </n-table>
    </div>
</template>

<script setup lang="ts">
import { useTimelineStore } from "../../store/timeline"
import { NTable } from 'naive-ui'
const timelineStore = useTimelineStore()
</script>

<style scoped></style>